{extend name="base" /}
{block name="css"}
<style>
	.lui-content {padding: 60px 0 20px;-moz-filter:blur(3px);-webkit-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);}
	.lui-result-nav {width: calc(100% - 30px);margin: 0 15px;height: 55px;line-height: 55px;text-align: center;background-color: #fe7404;color: #fff;font-size: 18px;}
	.correct_num {font-size: 28px;margin-left: 5px;margin-right: 2px;}
	.total_num {margin-left: 2px;}
	.lui-result-temp {padding: 0 15px;}
	.lui-result-temp-main {padding: 15px 0;}
	#best {border-bottom: 1px solid #edeff0;}
	.lui-result-temp-title {font-size: 16px;color: #25272c;margin-bottom: 10px;}
	.lui-result-ratio {border: 1px dashed #edeff0;height: 5px;border-radius: 3px;}
	.lui-ratio {background-color: #4782f6;height: 5px;border-radius: 3px;}
	.lui-result-score {margin-top: 10px;}
	.lui-subject {color: #4782f6;font-size: 14px;}
	.lui-score {color: #aaa;font-size: 14px;}
	.lui-organ-info-main {width: calc(100% - 60px);margin: 0 15px 20px;border: 1px dashed #edeff0;padding: 15px;}
	.lui-organ-logo img {width: 60px;vertical-align: middle;margin-right: 10px;}
	.organ-name {font-size: 21px;color: #25272c;}
	.lui-organ-intr {font-size: 16px;color: #25272c;line-height: 1.6;margin: 15px 0;}
	.lui-organ-intr img {max-width: 100%;height: auto;}
	.lui-organ-intr video {max-width: 100%;max-height: 50vw;margin: 5px auto;background-color: #f3f3f3;}
	.lui-organ-intr iframe {max-width: 100%;max-height: 50vw;margin: 5px auto;background-color: #f3f3f3;}
	.lui-organ-intr embed  {max-width: 100%;max-height: 50vw;margin: 5px auto;background-color: #f3f3f3;}
	.lui-organ-intr p {margin: 3px 0;}
	.lui-organ-phone {text-align: center;border-top: 1px solid #edeff0;padding-top: 10px;color: #aaa;font-size: 16px;}
	.lui-result-title {height: 45px;line-height: 45px;color: #4782f6;background-color: #f3f3f3;padding-left: 15px;font-size: 16px;}
	.lui-result-list {padding: 15px;font-size: 16px;color: #25272c;line-height: 1.6;}
	.lui-option-item {padding: 5px 0;margin: 10px 0 5px;border-top: 1px solid #edeff0;border-bottom: 1px solid #edeff0;}
	.lui-option-item div {margin: 5px 0;}
	.lui-answer-item {border-bottom: 1px solid #edeff0;padding: 5px 0 10px;margin-bottom: 10px;}
	.lui-answer-item {font-size: 16px;color: #25272c;}
	.lui-answer {color: #87d37b;}
	.lui-error {color: #ff6743;}
	.correct-answer {margin-left: 15px;}
	.correct-answer-text {color: #87d37b;}
	#temp2 {padding: 0 15px;}
	.lui--resulttemp-left {float: left;width: 50%;}
	.lui--resulttemp-right {float: right;width: 50%;}
	.lui--resulttemp-right .lui-result-temp-title {font-size: 14px;}
	.lui--resulttemp-right .lui-subject {font-size: 12px;}
	.lui--resulttemp-right .lui-score {font-size: 12px;}
	.lui-question-item img {vertical-align: middle;margin: 0 2px;max-width: 98% !important;height: auto !important;}
	.lui-option-item img {vertical-align: middle;}
	.lui-option-item p {display: inline-block;margin: 0;}
	@media (max-width: 320px) {
		.lui-content {padding-top: 52px;padding-bottom: 15px;}
		.lui-result-nav {height: 50px;line-height: 50px;font-size: 16px;}
		.correct_num {font-size: 24px;}
	}
	
   .answer_again{text-decoration:none;}
</style>
<link rel="stylesheet" href="__CSS__/ruanyuan.css">
{/block}
{block name="body"}
	<div class="lui-content">
		<div class="lui-result-nav">
			我的成绩：<span class="correct_num">{$data.correct_sub_num}</span>/<span class="total_num">{$data.total_sub_num}</span>
		</div>
		{if condition='$data.temp eq 1 or $data.temp eq 2'}
		<div id="temp1" class="lui-result-temp">
			<div id="best" class="lui-result-temp-main">
				<div class="lui-result-temp-title">最佳得分知识点</div>
				<div class="lui-result-ratio">
					<div class="lui-ratio" style="width: {$data.best.ratio}%;"></div>
				</div>
				<div class="lui-result-score">
					<span class="lui-subject">{$data.best.name}</span>
					<span class="lui-score">掌握 <span class="score-text">{$data.best.ratio}%</span></span>
				</div>
			</div>
			<div id="lift" class="lui-result-temp-main">
				<div class="lui-result-temp-title">有待提升知识点</div>
				<div class="lui-result-ratio">
					<div class="lui-ratio" style="width: {$data.lift.ratio}%;"></div>
				</div>
				<div class="lui-result-score">
					<span class="lui-subject">{$data.lift.name}</span>
					<span class="lui-score">掌握 <span class="score-text">{$data.lift.ratio}%</span></span>
				</div>
			</div>
		</div>
		{elseif condition='$data.temp eq 3 or $data.temp eq 4'/}
		<div id="temp2" class="lui-result-temp">
			<div class="lui--resulttemp-left">
				<div id="radar" class="radar" style="width: 100%;height: 320px;"></div>
			</div>
			<div class="lui--resulttemp-right">
				<div id="best" class="lui-result-temp-main">
					<div class="lui-result-temp-title">有待提升知识点</div>
					<div class="lui-result-ratio">
						<div class="lui-ratio" style="width: {$data.lift2.ratio}%;"></div>
					</div>
					<div class="lui-result-score">
						<span class="lui-subject">{$data.lift2.name}</span>
						<span class="lui-score">掌握 <span class="score-text">{$data.lift2.ratio}%</span></span>
					</div>
				</div>
				<div id="lift" class="lui-result-temp-main">
					<div class="lui-result-ratio">
						<div class="lui-ratio" style="width: {$data.lift.ratio}%;"></div>
					</div>
					<div class="lui-result-score">
						<span class="lui-subject">{$data.lift.name}</span>
						<span class="lui-score">掌握 <span class="score-text">{$data.lift.ratio}%</span></span>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		{/if}
		
		<div class="lui-organ-info-main">
			<div class="lui-organ-info">
				<!--
				<div class="lui-organ-logo">
					<img src="{$data.organ.logo}" />
					<span class="organ-name">{$data.organ.name}</span>
				</div>
				-->
				<div class="lui-organ-intr">
					{$data.organ.pub_text|htmlspecialchars_decode}
				</div>
			</div>
			<div class="lui-organ-phone">
				机构联系电话：<span class="organ-phone">{$data.organ.mobile}</span>
			</div>
		</div>
		{if condition='$data.temp eq 2 or $data.temp eq 4'}
		<div class="lui-result-main">
			<div class="lui-result-title">答题反馈</div>
			<div class="lui-result-list">
				{foreach name="data.examList" item="vo"}
				<div class="lui-result-item">
					<div class="lui-question-item">
						{$key+1}. {$vo.QuestionContent|deletep}
					</div>
					<div class="lui-option-item">
						{foreach name="vo.Options" item="voitem"}
							<div>{$voitem.QuestionOptionId}：{$voitem.QuestionOptionText}</div>
						{/foreach}
					</div>
                    
                    
                    <div>
                    <div class="tm_answer ui-border-t">
                        {if condition='$vo.IsCorrect'}
						<font class="my-answer">你的选择：<font class="my-answer-text lui-answer">{$vo.myAnswer}</font></font>
						<font class="correct-answer">回答<font class="correct-answer-text">正确</font></font>
						{else/}
						<font class="my-answer">你的选择：<font class="my-answer-text lui-error">{$vo.myAnswer}</font></font>
						<font class="correct-answer">正确答案：<font class="correct-answer-text">{$vo.Answer}</font></font>
						{/if}
                        <font class="analyze_btn">查看解析<img src="__IMAGES__/ry_icon02.png" height="12" /></font>
                    </div>
                    <div class="analyze_view ui-border-t">
                        <h2 class="title" style="font-weight:normal;">解析</h2>
                        <div class="analyze">{$vo.Analysis}</div>
                        <span class="analyze_btn_b" style="width:100%; text-align:center; clear:both; display:block;">收起解析<img src="__IMAGES__/ry_icon03.png" height="12" /></span>
                    </div>
                    </div>
                    
                        
				</div>
				{/foreach}
			</div>
		</div>
		{/if}
        <div style="box-sizing:border-box; padding:10px; overflow:hidden; display:none;">
        <a href="{:url('index/questions','examinations_id='.$examinations_id.'&org_id='.$orgid.'&isrepeat=1')}" class="answer_again">再答一次</a>
        </div>
        
	</div>
{include file="weixin" /}
{/block}
{block name="js"}
<script src="__JS__/echarts/esl.js"></script>
<script src="__JS__/echarts/echarts-all.js"></script>
{/block}
{block name="script"}
<script>
	$(function(){
		var is_verify = '{$data.is_verify}';
		var answer_name = '{$answer_name}';
		var answer_mobile = '{$answer_mobile}';
		
		if(is_verify == 2 && answer_name == '' && answer_mobile == ''){
			var msg = {};
			msg.title = '填写联系方式';
			msg.title2 = '即刻查看测评报告';
			$.showInput2(msg,function(name,mobile){
				$.showLading();
				$.ajax({
					url: "{:url('index/Index/save_user2')}",
					type: "post",
					dataType: "json",
					cache: false,
					data: {
						eid: '{$data.eid}',
						answer_name: name,
						answer_mobile: mobile
					},
					success: function (info) {
						$.hideLading();
						if(info.status == 1){
							//$.showMsg('提交成功！');
						}else{
							//$.showMsg(info.msg);
						}
					}
				});
			});
		}else{
			$('.lui-content').css({'-moz-filter':'blur(0)','-webkit-filter':'blur(0)','-o-filter':'blur(0)','-ms-filter':'blur(0)','filter':'blur(0)'});
		}
	});
	
{if condition='$data.temp eq 3 or $data.temp eq 4'}
	$(function(){
		var winw = $(window).width();
		var radius = (winw - 80)/3.8;
		$('#radar').css({'width':(winw - 80),'height':radius*2.5});
		var myChart = echarts.init(document.getElementById('radar'));
		var CapabilityScores = {:json_encode($data.CapabilityScores)};
		var indicator = [];
		var value = [];
		var pright = 0.25*winw - 26;
		var pbottom = ((winw - 60)*2.5/7.9) - (167/2);
		
		$.each(CapabilityScores,function(i,v){
			var idata = {text: v.CapabilityName, max: 100};
			indicator.push(idata);
			value.push(v.Score);
		})
		
		var option = {
			polar : [
				{
					startAngle: 0,
					name:{
						show: true,
						formatter: null,
						textStyle: {
							color:'#25272c'
						}
					},
					splitArea: {
						show: true,
						areaStyle: {
							color: 'rgba(71,130,246,0.15)'
						}
					},
					indicator : indicator,
					radius : radius,
					type: 'circle'
				}
			],
			series : [
				{
					name: '能力雷达图',
					type: 'radar',
					itemStyle: {
						normal: {
							areaStyle: {
								color: 'rgba(71,130,246,0.3)',
								type: 'default'
							},
							lable:{
								textStyle:{
									fontSize:18,
								
								},
							},
						},
					},
					symbolSize: [1,2],
					data : [
						{
							value : value
						}
					]
				}
			]
		};
		
		var theme = {
			color: [
				'#4782f6'
			],
		};
		
		myChart.setOption(option);
		myChart.setTheme(theme);
		$('#radar').css({'-moz-transform':'scale(0.6)','-webkit-transform':'scale(0.6)','transform':'scale(0.6)','position':'relative','right': pright,'bottom': pbottom});
		$('.lui--resulttemp-left').css('height',167);
	})
{/if}

 $(document).ready(function(e) {
	 $('.analyze_btn').click(function(e){
		 $(this).parent().parent().find('.analyze_btn').hide();
		 $(this).parent().parent().find('.analyze_view').slideDown(200);
	 })
	 $('.analyze_btn_b').click(function(){
		 $(this).parent().parent().find('.analyze_btn').show();
		 $(this).parent().parent().find('.analyze_view').slideUp(200);
	 })
 });
</script>
{/block}